<template>
  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    direction="rtl"
    :wrapperClosable="false"
    custom-class="form-drawer"
    size="450px"
    @closed="closed"
    >

    <div class="form-drawer__content">


      <el-form ref="formData" :model="formData" :rules="rules" style="padding: 20px;" >

        <el-form-item :label-width="formLabelWidth" label="项目名称" prop="name">
          <el-input v-model="formData.name" placeholder="项目名称" autocomplete="off" disabled />
        </el-form-item>


        <el-form-item :label-width="formLabelWidth" label="项目封面" prop="imageUrl">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="预览分辨率" prop="resX">
          <el-input-number v-model="formData.resX" :min="200" :max="7680" label="宽度(px)" style="margin-right: 5px; width: 150px;" />
          <el-input-number v-model="formData.resY" :min="200" :max="7680" label="高度(px)" style="width: 150px;" />
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="分享地址" prop="imageUrl">
          <el-input placeholder="分享地址" v-model="formData.url"  disabled >
            <el-button slot="append" @click="handleSubmit">复制</el-button>
          </el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="分享时限" prop="limitedTime">
          <el-input placeholder="分享时限" v-model="formData.limitedTime" type="number" min=1 max=60>
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="二维码" prop="qrUrl" >
          <img v-if="qrUrl" :src="qrUrl" style="width: 160px;height: 160px;border: 1px solid #797979;padding: 5px;" >
          <div style="margin-top: -16px;">
            <span style="color: #333333;font-size: 14px;">使用手机扫码预览项目</span>
          </div>
        </el-form-item>
      </el-form>

      <div class="form-drawer__footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="updateProjectShare">保存分享地址</el-button>
      </div>
    </div>

  </el-drawer>
</template>




<script>

  import {
    shareProject,
    updateProjectShare
  } from '@/api/biz/project'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'ShareDrawer',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.projectId= value.data.id || ''
            this.imageUrl=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.sceneId
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'项目分享',
        loading:false,
        projectId:'',
        formData: {
          id: '',
          name: '',
          limitedTime:1,
          resX:1920,
          resY:1080,
          projectId:'',
          url:''
        },
        formLabelWidth:'90px',
        imageUrl: '',
        qrUrl:'',
        rules: {
          limitedTime: [{
            required: true,
            message: '请输场分享时限',
            trigger: 'blur'
          }
          ],
        }
      }
    },
    created() {
      this.shareProject();
    },
    methods:{
      shareProject(){
        this.loading=true
        shareProject({
          projectId: this.projectId,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            this.formData.id = _data.id || ''
            this.formData.name = _data.name || ''
            this.formData.projectId = _data.projectId || ''
            this.formData.resX = _data.resX || 1920
            this.formData.resY = _data.resY || 1080
            this.formData.limitedTime = _data.limitedTime || 1
            this.formData.url = _data.url || ''
            this.qrUrl=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+_data.id
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      updateProjectShare: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            updateProjectShare(this.formData).then(rsp => {
              if(200==rsp.code){
                this.$message({
                  type: 'success',
                  message:rsp.message
                })
              }
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      handleSubmit() {
      	var copyContent = document.createElement('input');
      	copyContent.value = this.formData.url+'&width='+this.formData.resX+'&height='+this.formData.resY;
      	document.body.appendChild(copyContent);
      	copyContent.select(); // 选择对象
      	document.execCommand("Copy"); // 执行浏览器复制命令
      	this.$message.success("复制成功！");
      	copyContent.remove();
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>


<style scoped>  

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 240px  !important;
    height: 180px  !important;
    line-height: 180px !important;
    text-align: center;
    border-radius: 10px;
  }
  .avatar {
    width: 240px !important;
    height: 180px !important;
    display: block;
    border-radius: 10px;
  }

</style>
